<template>
  <view class="main">
    <view class="top">
      <button class="back-btn" size="mini" type="primary" @click="back">上一题</button>
      <button class="next-btn" size="mini" type="primary" @click="next">下一题</button>
    </view>
    <uni-group title="题目">
      <!-- 题干 -->
      <view class="content" mode="card">
        <uni-tag :text="tipMap[problemList[currentProblemIndex].type]" :type="style[problemList[currentProblemIndex].type]"></uni-tag>
        <uni-tag :text="`${problemList[currentProblemIndex].score}分`" :type="getScoreTag(problemList[currentProblemIndex].score)"></uni-tag>
        <!-- markdown -->
        <smart-markdown :content="problemList[currentProblemIndex].content"></smart-markdown>
      </view>
    </uni-group>
    <uni-group title="作答">
      <!-- 作答区 -->
      <view class="edit">
        <!-- 主观题 -->
        <view v-if="problemList[currentProblemIndex].type == 3">
          <uni-easyinput type="textarea" autoHeight placeholder="该题为主观题，请填写答案后自行检查"></uni-easyinput>
          <button class="next-btn" size="mini" type="primary" @click="showAnswer(problemList[currentProblemIndex])">检查</button>
        </view>
        <!-- 客观题 -->
        <view v-else>
          <!-- 单选和判断 -->
          <radio-group v-if="problemList[currentProblemIndex].type != 1" @change="checkAnswer">
            <label class="uni-list-cell uni-list-cell-pd" v-for="option in currentOption" :key="option.id">
              <view>
                <radio
                  :value="option"
                  :color="correctAnswer == option.index ? '#67C23A' : '#F56C6C'"
                  :checked="isShowAnswer && option.index == correctAnswer" />
                {{ option.index }}.{{ option.content }}
              </view>
            </label>
          </radio-group>
        </view>
      </view>
    </uni-group>
    <uni-group title="答案" v-if="isShowAnswer && problemList[currentProblemIndex].type == 3">
      <smart-markdown :content="problemList[currentProblemIndex].answer"></smart-markdown>
    </uni-group>
    <uni-group title="解析" v-if="isShowAnswer">
      <view>
        <smart-markdown :content="problemList[currentProblemIndex].parse"></smart-markdown>
      </view>
    </uni-group>
  </view>
</template>

<script>
import SmartMarkdown from '@/components/markdown/index'
export default {
  components: {
    SmartMarkdown,
  },
  data() {
    return {
      problemList: [
        {
          content: '',
        },
      ],
      style: {
        0: 'primary',
        1: 'success',
        2: 'warning',
        3: 'error',
      },
      tipMap: {
        0: '单选题',
        1: '多选题',
        2: '判断题',
        3: '主观题',
      },
      currentProblemIndex: 0,
      //题目查询表单
      problemForm: {
        current: 1,
        size: 500,
      },
      total: 0,
      isShowAnswer: false,
      // 当前题目的选项
      currentOption: [],
      // 正确答案
      correctAnswer: 'A',
    }
  },
  onLoad(options) {
    if (!options.id) {
      uni.switchTab({
        url: `index`,
      })
    }
    this.getProblemList(options.id)
  },
  methods: {
    getProblemList(id) {
      var form = this.problemForm
      form.bankId = id
      this.$store.dispatch('problem/lookProblem', form).then((response) => {
        if (response.success) {
          this.problemList = response.data
          this.getOneProblem(response.data[this.currentProblemIndex].id)
        }
      })
    },
    //获取单个题目信息
    getOneProblem(id) {
      this.$store.dispatch('problem/lookProblemById', id).then((response) => {
        if (response.success) {
          this.currentOption = response.data.options
        }
      })
    },
    checkAnswer(e) {
      if (e.detail.data) {
        this.correctAnswer = e.detail.data.index
      }
      this.isShowAnswer = true
    },
    //切换题目的公共方法
    nextProblemCommon(data) {
      this.isShowAnswer = false
      if (data.type != 3) {
        this.getOneProblem(data.id)
      }
    },
    back() {
      this.nextProblemCommon(this.problemList[this.currentProblemIndex <= 0 ? 0 : --this.currentProblemIndex])
    },
    next() {
      this.nextProblemCommon(
        this.problemList[this.currentProblemIndex >= this.problemList.length - 1 ? this.problemList.length - 1 : ++this.currentProblemIndex],
      )
    },
    showAnswer(data) {
      if (data.type == 3) {
        this.isShowAnswer = true
      }
    },
    getScoreTag(value) {
      if (value >= 30) {
        return 'error'
      } else if (value >= 20 && value < 30) {
        return 'warning'
      } else if (value >= 10 && value < 20) {
        return 'primary'
      } else {
        return 'success'
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.main {
  .top {
    height: 60rpx;
    .back-btn {
      float: left;
    }
    .next-btn {
      float: right;
    }
  }
  .content {
    .content-text {
      height: 200rpx;
    }
  }
}
</style>
